<template>
	<app-page>
		<wd-config-provider :theme="theme">
			<view class="container">
				<wd-navbar :custom-style="navbarCustom" fixed safeAreaInsetTop>

				</wd-navbar>
				<view class="head">
					<wd-swiper :list="swiperList" autoplay></wd-swiper>

				</view>
				<view class="card">
					<index-menu></index-menu>
				</view>
				<view class="">
					<indexRows></indexRows>
				</view>
				<view>
					<indexCase @reData="reData" :newCount="indexData.new_count"
						:seviceingCount="indexData.seviceing_count" :online="indexData.online"></indexCase>
				</view>
				<!-- 	<wd-popup v-model="authPopup" position="bottom" custom-style="border-radius: 25rpx 25rpx 0 0;"
					:safe-area-inset-bottom="true">
					<view class="body">
						<view class="title">
							<image class="icon" src="@/static/logo.png"></image>
						</view>
						<view class="desc">请您允许授权手机号，方便我们帮您注册账号</view>
					</view>
				</wd-popup> -->
				<view>
					<indexTask :tipsList="indexData.tips_list"></indexTask>
				</view>
			</view>
		</wd-config-provider>
	</app-page>

</template>

<script lang="ts">
	import { defineComponent, ref, reactive, computed } from 'vue';

	import { onPageScroll, onLoad, onShow } from '@dcloudio/uni-app';

	import useStatusHeight from '@/hooks/useStatusHeight.ts';
	import indexMenu from "@/components/index/menu";
	import indexNotice from "@/components/index/notice";
	import indexRows from "@/components/index/rows"
	import indexCase from "@/components/index/case"
	import indexTask from "@/components/index/task"
	import { useUserStore, useAppStore } from '@/store';
	import { bannerList, getIndexDataInfo } from "@/api/index"

	export default defineComponent({
		name: 'Index',
		components: { indexMenu, indexNotice, indexRows, indexCase, indexTask },
		setup(props, ctx) {
			// 日间light、夜间dark主题
			const theme = ref('light');
			const statusHeigt = useStatusHeight();
			const userStore = useUserStore();
			const appStore = useAppStore();
			let navbarCustom = ref(`width: ${statusHeigt.barLeft ? statusHeigt.barLeft + 'px' : 100 + '%'};`)
			const authPopup = ref(false)
			const swiperList : any = ref([]);
			const getInfoStr = (info : string) => {
				/* 去除富文本中的html标签 */
				/* *、+限定符都是贪婪的，因为它们会尽可能多的匹配文字，只有在它们的后面加上一个?就可以实现非贪婪或最小匹配。*/
				let content = info.replace(/<.+?>/g, '');

				/* 去除&nbsp; */
				content = content.replace(/&nbsp;/ig, '');

				/* 去除空格 */
				content = content.replace(/\s/ig, '');
				return content
			};
			const indexData : any = reactive({

			});
			const xcxStatus = computed(() => appStore.config.xcx_status)
			const reData = () => {
				getIndexDataInfo().then((res : any) => {
					console.log(res) // 打印首页数据信息
					indexData.new_count = res.new_count;
					indexData.online = res.online;
					indexData.seviceing_count = res.seviceing_count;
					indexData.tips_list = res.tips_list;
				})
			}
			onShow(() => {
				reData();
				userStore.getUserInfo();
				bannerList().then((res : any) => {
					console.log(res) // 打印banner列表数据
					swiperList.value = res.map(item => item.image);
				})
			})

			onPageScroll((e) => {
				console.log(e.scrollTop); // 打印页面滚动的距离
				if (e.scrollTop > 0) {
					navbarCustom.value = `width: ${statusHeigt.barLeft ? statusHeigt.barLeft + 'px' : 100 + '%'};background-color: rgb(201, 28, 31) !important;`
				} else if (e.scrollTop === 0) {
					navbarCustom.value = `width: ${statusHeigt.barLeft ? statusHeigt.barLeft + 'px' : 100 + '%'};`
				}
			});
			return {
				theme,
				statusHeigt,
				navbarCustom,
				getInfoStr,
				indexData,
				swiperList,
				reData,
				authPopup,
				xcxStatus
			};
		}
	});
</script>

<style lang="less" scoped>
	.container {
		background-color: #fff;
		padding: 27rpx;
		position: relative;
		padding-top: 349rpx;



		:deep(.search-box) {
			.wd-search {
				background-color: transparent !important;
				// #ifdef MP
				padding-top: 10rpx;
				// #endif
			}
		}

		.news {
			width: 40rpx;
			height: 40rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.wd-navbar {
			// top: var(--status-bar-height);
		}

		:deep(.wd-swiper__track) {
			border-radius: 0 !important;
		}

		:deep(.wd-navbar) {
			position: fixed;
			width: 100%;
			height: 100rpx;
			// #ifdef MP
			height: 96rpx !important;
			line-height: 96rpx !important;
			// #endif
			background-color: transparent !important;

			// #ifdef MP
			.wd-navbar__right {
				top: -10rpx;
			}

			// #endif
			.wd-navbar__right:hover {
				background-color: transparent !important;
			}

			.wd-navbar__title {
				margin: 0;
				max-width: 70%;
				// #ifdef MP
				max-width: 90%;
				// #endif
			}

			&::after {
				display: none !important;
			}
		}

		.head {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 446rpx;
			z-index: 1;

			.head-bg {
				width: 100%;
				height: 100%;
			}

			.head-icon {
				position: absolute;
				width: 260rpx;
				height: 226rpx;
				right: 40rpx;
				bottom: 95rpx;
			}



			.text-box {
				position: relative;
				bottom: 300rpx;
				left: 30rpx;
				width: calc(100% - 30rpx);

				.title {
					font-family: Microsoft YaHei;
					font-weight: bold;
					font-size: 50rpx;
					color: #ffffff;
				}

				.desc {
					font-family: PingFang SC;
					font-weight: 300;
					font-size: 32rpx;
					color: #ffffff;
					margin-top: 20rpx;
				}

				.btn {
					display: inline-block;
					width: auto;
					background: #c91c1f;
					border-radius: 16rpx;
					padding: 6rpx 14rpx;
					font-family: PingFang;
					font-weight: bold;
					font-size: 19rpx;
					color: #ffffff;
					margin-top: 20rpx;
				}
			}
		}

		.card {
			position: relative;
			z-index: 1;
		}


	}
</style>